<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col :xs="24" :sm="6" :md="5" :lg="4" class="drag-area" id="drag-area">
        <div style="padding: 12px" class="menu-demo2">数据选择</div>
        <el-card class="box-card">
          <el-form
            :model="examForm"
            label-width="80px"
            label-position="top"
            :rules="examRule"
          >
            <el-form-item label="请选择课程">
              <el-select
                v-model="examForm.classId"
                filterable
                clearable
                placeholder="请选择课程"
                @change="changeClassId"
              >
                <el-option
                  v-for="item in classOptions"
                  :key="item.id"
                  :label="item.courseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="请选择考试名称" prop="examId">
              <!-- <el-cascader
                v-model="examForm.examId"
                placeholder="搜索考试"
                :options="examOptions"
                filterable
                clearable
                :show-all-levels="false"
              >
              </el-cascader> -->
              <el-select
                v-model="examForm.examId"
                filterable
                placeholder="请选择考试"
              >
                <el-option
                  v-for="item in examOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="请选择考试的时间范围" prop="timeArea">
                <el-date-picker v-model="examForm.timeArea" type="daterange"  range-separator="至"
                start-placeholder="开始日期"
                 end-placeholder="结束日期">
               </el-date-picker>
              </el-form-item> -->

            <el-form-item class="father">
              <el-button
                size="small"
                type="primary"
                class="child"
                @click="submitForm()"
                >查询数据</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 侧边栏拖拽框 -->
        <div class="drag-tip" id="drag-tip"></div>
      </el-col>
      <el-col :xs="24" :sm="18" :md="18.7" :lg="20" id="drag-content">
        <!-- <el-button type="primary" style="display: relative; top: 20px;">数据图形分析</el-button> -->
        <div
          class="menu-demo1"
          style="padding: 12px; color: #fff; display: inline"
        >
          数据图形分析
        </div>
        <el-card
          class="box-card"
          style="margin: -4px 10px 0 10px; z-index: -20"
        >
          <div slot="header">
            <el-row>
              <i class="el-icon-download" style="float: right"></i>
            </el-row>

            <el-row>
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                max-height="300"
                empty-text="暂无数据"
              >
                <el-table-column
                  prop="className"
                  label="班级名称"
                  fixed
                  min-width="150"
                >
                </el-table-column>

                <el-table-column label="实考人数" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.studentCount }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="最高分" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.highestScore) }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="最低分" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.lowestScore) }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="平均分" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.average) }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="优秀率%" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.excellentRate) }}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="良好率%" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.goodRate) }}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="合格率%" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.qualifiedRate) }}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="及格率%" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.passRate) }}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="极差率%" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.rangeRate) }}%</span>
                  </template>
                </el-table-column>

                <el-table-column label="标准差">
                  <template slot-scope="scope">
                    <span>{{ handelNum(scope.row.standardDeviation) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
          <div class="text item">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="16" :lg="16">
                <div
                  id="Personal_scale"
                  style="width: 100%; height: 400px"
                ></div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="8" :lg="8">
                <div
                  id="Personal_average"
                  style="width: 100%; height: 400px"
                ></div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top: 20px">
              <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <div
                  id="Personal_achievement"
                  style="width: 100%; height: 400px"
                ></div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top: 20px">
              <el-col :xs="24" :sm="24" :md="24" :lg="24">
                <div
                  id="Personal_deviation"
                  style="width: 100%; height: 400px"
                ></div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import {
  getCourseList,
  getQualityAnalysis,
  getExaminationList,
} from '../../../../api/exam/examinee'

export default {
  name: 'qualityAnalysis',
  data() {
    return {
      // 考试数据
      examOptions: [],
      // 课程数据
      classOptions: [],

      examForm: {
        examId: '',
      },
      examRule: {
        exam_name: [
          { required: true, message: '请选择考试名称', trigger: 'blur' },
        ],
      },
      // 顶部表格数据
      tableData: [],
    }
  },
  created() {
    this.getCourseList()
    this.changeClassId()
  },
  mounted() {
    // 页面大小改变后可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。
    window.addEventListener('resize', function () {
      //自适应
      Personal.resize()
      average.resize()
      scale.resize()
      deviation.resize()
    })
  },
  methods: {
    // 计算保留两位小数
    handelNum(val) {
      return Math.floor(val * 100) / 100
    },
    //综合分析
    setPersonalChart(data1, data2) {
      /*图形数据定义*/
      let Personal = this.echarts.init(
        document.getElementById('Personal_achievement'),
        'macarons'
      )
      //综合分析定义
      let option = {
        title: {
          text: '综合分析',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: [
            '最高分',
            '最低分',
            '平均分',
            '优秀率',
            '良好率',
            '合格率',
            '及格率',
            '极差率',
            '标准差',
          ],
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 40,
            start: 1,
            end: 2,
            backgroundColor: 'rgba(38,227,189,0.3)',
            borderColor: '#0a2b24',
          },
        ],
        toolbox: {
          show: true,
          left: 'left',
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            name: '班级',
            data: data1.className,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '最高分',
            type: 'bar',
            data: data1.highestScore,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '最低分',
            type: 'bar',
            data: data1.lowestScore,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '平均分',
            type: 'bar',
            data: data1.average,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '优秀率',
            type: 'bar',
            data: data1.excellentRate,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '良好率',
            type: 'bar',
            data: data1.goodRate,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '合格率',
            type: 'bar',
            data: data1.qualifiedRate,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '及格率',
            type: 'bar',
            data: data1.passRate,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '极差率',
            type: 'bar',
            data: data1.rangeRate,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '标准差',
            type: 'bar',
            data: data1.standardDeviation,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      Personal.setOption(option)
    },
    //平均分分析
    setAverageChart(data) {
      let average = this.echarts.init(
        document.getElementById('Personal_average'),
        'macarons'
      )
      //平均分分析
      let optionaverage = {
        title: {
          text: '平均分分析',
          subtext: '',
          x: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          x: 'center',
          y: 'bottom',
          data: [],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '班级平均分',
            type: 'pie',
            radius: [30, 110],
            center: ['50%', '50%'],
            roseType: 'area',
            data: data,
          },
        ],
      }
      average.setOption(optionaverage)
    },
    //分数段分析
    setScaleChart(data) {
      let scale = this.echarts.init(
        document.getElementById('Personal_scale'),
        'macarons'
      )
      //分数段分析
      let optionscale = {
        title: {
          text: '分数段分析',
          subtext: '',
          x: 'left',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 40,
            start: 1,
            end: 200,
            backgroundColor: 'rgba(38,227,189,0.3)',
            borderColor: '#0a2b24',
          },
        ],
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: data.legend_data,
        },

        xAxis: [
          {
            type: 'category',
            data: data.legend_data,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数',
          },
        ],
        series: data.series,
      }
      scale.setOption(optionscale)
    },
    //离差分析
    setDeviationChart(data) {
      let deviation = this.echarts.init(
        document.getElementById('Personal_deviation'),
        'macarons'
      )
      //年级离差值分析
      let optiondeviation = {
        title: {
          text: '离差值分析(=个人成绩-年级平均分)',
          subtext: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['年级离差'],
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 30,
            start: 1,
            end: 200,
            backgroundColor: 'rgba(38,227,189,0.3)',
            borderColor: '#0a2b24',
          },
        ],
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.xAxis_data,
        },
        yAxis: {
          type: 'value',
          name: '差值',
          axisLabel: {
            formatter: '{value} ',
          },
        },
        series: [
          {
            name: '年级离差',
            type: 'line',
            data: data.series,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
        ],
      }
      deviation.setOption(optiondeviation)
    },

    // 获取课程列表
    getCourseList() {
      getCourseList().then((res) => {
        this.classOptions = res.rows
      })
    },

    // 获取考试名称类列表
    changeClassId(val) {
      this.examForm.examId = ''
      getExaminationList({
        courseId: val,
      }).then((res) => {
        this.examOptions = res.rows
      })
    },

    // 查询当前课程下数据分析
    submitForm() {
      getQualityAnalysis(this.examForm.examId).then((res) => {
        console.log(res)
        this.tableData = res.data

        res.data_scale.series.forEach((val) => {
          val.data = `[${val.data}]`
        })

        let obj = {
          className: [],
          highestScore: [],
          lowestScore: [],
          average: [],
          excellentRate: [],
          goodRate: [],
          qualifiedRate: [],
          passRate: [],
          rangeRate: [],
          standardDeviation: [],
        }
        res.data.forEach((val) => {
          obj.className.push(val.className)
          obj.highestScore.push(val.highestScore)
          obj.lowestScore.push(val.lowestScore)
          obj.average.push(val.average)
          obj.excellentRate.push(val.excellentRate)
          obj.goodRate.push(val.goodRate)
          obj.qualifiedRate.push(val.qualifiedRate)
          obj.passRate.push(val.passRate)
          obj.rangeRate.push(val.rangeRate)
          obj.standardDeviation.push(val.standardDeviation)
        })
        console.log(obj)

        this.setAverageChart(res.data_average.data)
        this.setDeviationChart(res.data_deviation)
        this.setScaleChart(res.data_scale)
        this.setPersonalChart(obj, res.grade_names)
      })
    },
  },
}
</script>

<style scoped>
.father {
  display: flex;
  justify-content: center;
}
.menu-demo1 {
  border-radius: 3px;
  background-color: #9c27b0;
  box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28),
    0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2);
}
.menu-demo2 {
  border-radius: 3px;
  background: linear-gradient(60deg, #26c6da, #00acc1);
  box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28),
    0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
}
</style>

